<template>
    <div class="home">
        <div class="title">
            <div class="img">
                <img src="../assets/img/headimg.jpg" alt="">
            </div>
            <div class="text">
                <p class="name">管理员名</p>
                <p class="zhiwei">职位：总管理员</p>
            </div>
        </div>
        <div class="list">
            <div class="c-list">
                <div class="c-title">
                    <span>当前</span>活动
                </div>
                <div class="c-title-name">迎国庆，大放送</div>
                <div class="card">
                    <div class="card-list" v-for="(item,index) in cards" >
                        <div class="my-card" :class="index==0?'card1':index==1?'card2':'card3'">
                            <div class="c-top">
                                <p>{{item.name}}</p>
                            </div>
                            <div class="c-bottom">{{item.type==3?'初级券':item.type==2?'中级券':'高级券'}}</div>
                            <div class="circle">
                                <div class="left-circle"></div>
                                <div class="right-circle"></div>
                            </div>
                        </div>
                        <div class="card-text">
                            <p>总计：10张</p>
                            <p>剩余：8张</p>
                        </div>
                    </div>
                </div>
                <div class="time">截止日期：2019.12.31 22:00</div>
            </div>
        </div>
        <div class="jiesuan">
            <i class="iconfont icon-qgjsaoma"></i>
            <span>客户优惠券结算</span>
        </div>
        <foot :num="1"></foot>
    </div>
</template>

<script>
    export default {
        name: "Home",
        data(){
            return{
                cards:[
                    {
                        name:'满300 打九折+雪花啤酒一箱',
                        type:'1'
                    },
                    {
                        name:'消费满200送中份干锅',
                        type:'2'
                    },
                    {
                        name:'赠送凉菜一份',
                        type:'3'
                    },
                ]
            }
        }
    }
</script>

<style scoped>
    .title{
        width: 90%;
        height: 5rem;
        display: flex;
        margin: auto;
    }
    .title > .img{
        width: 20%;
        height: 5rem;
        line-height: 5rem;
    }
    .title > .img > img{
        width: 3rem;
        height: 3rem;
        vertical-align: middle;
    }
    .title > .text{
        width: 80%;
    }
    .title > .text > p{
        height: 2.5rem;
    }
    .title > .text > .name{
        color: #333333;
        font-weight: bold;
        line-height: 4rem;
        font-size: 1rem;
    }
    .title > .text > .zhiwei{
        color: #333;
        font-size: .7rem;
        line-height: 1.5rem;
    }
    /*卡列表*/
    .list{
        width: 95%;
        margin: auto;
    }
    .list > .c-list{
        width: 100%;
    }
    .list > .c-list > .c-title{
        font-size: .95rem;
        font-weight: bold;
        line-height: 1.5rem;
    }
    .list > .c-list > .c-title > span{
        border-bottom: 3px solid #2C6EFE;
    }
    .list > .c-list > .c-title-name{
        text-align: center;
        color: #333333;
        font-size: .9rem;
        line-height: 1.5rem;
    }
    .list > .c-list > .card{
        width: 100%;
        display: flex;
        justify-content: space-around;
    }
    .list > .c-list > .card > .card-list{
        width: 30%;
        color: #FFFFFF;
        font-size: .9rem;
        border-radius: 5px;
        text-align: center;
        box-shadow: 0 2px 2px rgba(0,0,0,.1);
    }
    .list > .c-list > .card > .card-list > .my-card{
        border-radius: 5px;
    }
    .list > .c-list > .card > .card-list > .my-card > .c-top{
        width: 95%;
        margin: auto;
        height: 5rem;
        line-height: 1.5rem;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
    .list > .c-list > .card > .card-list > .my-card > .c-top > p{
        vertical-align: bottom;
    }
    .list > .c-list > .card > .card-list > .my-card > .c-bottom{
        height: 2.2rem;
        line-height: 2.2rem;
        border-top: 1px dashed rgba(0,0,0,.1);
    }
    /*渐变背景色*/
    .card1{
        background: linear-gradient(to bottom,#FF8787,#EC384F) !important;
    }
    .card2{
        background: linear-gradient(to bottom,#FFD623,#FF9701) !important;
    }
    .card3{
        background: linear-gradient(to bottom,#3BD5E9,#5D7BE9) !important;
    }
    /*两边的小圆圈*/
    .circle{
        position: absolute;
        margin-top: -2.55rem;
        height: .7rem;
        width: 28.5%;
        display: flex;
        justify-content: space-between;
    }
    .circle > div{
        height: .7rem;
        width: .7rem;
        border-radius: 50%;
        background: #FFFFFF;
    }
    .left-circle{
        margin-left: -.35rem;
    }
    .right-circle{
        margin-right: -.35rem;
    }
    /*卡片数量*/
    .card-text{
        padding-top: .5rem;
        font-size: .8rem;
        color: #666;
        line-height: 1.5rem;
    }
    .time{
        line-height: 2rem;
        font-size: .9rem;
        color: #333;
        text-align: center;
    }
    /*结算按钮*/
    .jiesuan{
        width: 90%;
        background: #2C6EFE;
        line-height: 3.3rem;
        border-radius: 5px;
        text-align: center;
        color: #FFFFFF;
        font-size: 1rem;
        position: fixed;
        bottom: 5rem;
        left: 5%;
    }
</style>